// 图片加载处理工具类
class ImageLoader {
  constructor() {
    // 默认回退图片
    this.fallbackImages = {
      avatar: '/src/assets/logo.png',
      thumbnail: '/src/assets/logo.png',
      cover: '/src/assets/logo.png',
      default: '/src/assets/logo.png',
    }
    
    // 支持的本地图片资源映射
    this.localImages = {
      // 动漫相关
      anime1: '/src/assets/鬼灭之刃.jpeg',
      anime2: '/src/assets/动漫.png',
      
      // 游戏相关
      game1: '/src/assets/黑神话.jpeg',
      game2: '/src/assets/悟空.jpg',
      game3: '/src/assets/黑悟空.jpg',
      
      // 活动相关
      event1: '/src/assets/二次元美食节.png',
      event2: '/src/assets/二次元美食节海报_3.jpg',
      event3: '/src/assets/数码科技展.png',
      event4: '/src/assets/科技数码展宣传图.jpg',
      
      // 电影相关
      movie1: '/src/assets/喜剧电影.jpeg',
      
      // 音乐相关
      music1: '/src/assets/周杰伦.png',
    }
  }

  /**
   * 获取图片URL，如果是picsum链接则添加错误处理
   * @param {string} url - 原始图片URL
   * @param {string} type - 图片类型 (avatar, thumbnail, cover, default)
   * @returns {string} 处理后的图片URL或回退URL
   */
  getImageUrl(url, type = 'default') {
    // 如果URL为空，返回回退图片
    if (!url) {
      return this.fallbackImages[type] || this.fallbackImages.default
    }

    // 如果已经是本地资源，直接返回
    if (url.startsWith('/src/assets/')) {
      return url
    }

    // 检查是否是预定义的本地图片键名
    if (this.localImages[url]) {
      return this.localImages[url]
    }

    // 对于picsum链接，我们可以考虑使用本地资源替代
    // 但这里我们保持原链接，只是在Vue组件中添加错误处理
    return url
  }

  /**
   * Vue指令：处理图片加载错误
   */
  getImageErrorDirective() {
    return {
      bind(el, binding) {
        // 保存原始图片URL
        el._originalSrc = el.src
        
        // 设置错误处理函数
        el.onerror = function() {
          const fallbackType = binding.arg || 'default'
          const loader = new ImageLoader()
          
          // 尝试使用本地回退图片
          this.src = loader.fallbackImages[fallbackType] || loader.fallbackImages.default
          
          // 可以在这里添加额外的错误处理，比如记录日志
          console.warn('图片加载失败，已使用回退图片:', el._originalSrc)
        }
      },
      unbind(el) {
        // 清理事件监听
        el.onerror = null
      },
    }
  }

  /**
   * 批量替换picsum链接为本地资源（用于开发环境）
   * @param {Array|Object} data - 包含图片URL的数据
   * @returns {Array|Object} 替换后的数据
   */
  replacePicsumWithLocal(data) {
    if (!data) return data

    // 递归处理数据
    const processData = (item) => {
      if (Array.isArray(item)) {
        return item.map(processData)
      } else if (item && typeof item === 'object') {
        const result = { ...item }
        
        // 检查常见的图片字段
        const imageFields = ['src', 'thumbnail', 'cover', 'image', 'poster', 'avatar', 'moviePoster']
        
        for (const field of imageFields) {
          if (result[field] && typeof result[field] === 'string') {
            // 替换picsum链接
            if (result[field].includes('picsum.photos')) {
              // 尝试从链接中提取id或seed作为本地图片的键名
              const match = result[field].match(/id\/(\d+)\/|seed\/(\w+)\//)
              if (match) {
                const key = match[1] || match[2]
                // 如果有对应的本地图片，使用本地图片
                if (this.localImages[key]) {
                  result[field] = this.localImages[key]
                }
              }
            }
          } else if (result[field] && typeof result[field] === 'object') {
            result[field] = processData(result[field])
          }
        }
        
        return result
      }
      return item
    }

    return processData(data)
  }
}

// 创建单例实例
const imageLoader = new ImageLoader()

// 导出工具类和单例实例
export { ImageLoader }
export default imageLoader